<template>
  <!-- 每个页面只能有一个最外层div -->
  <div class="test">hfhhhh
    <div class="one">
      <div class="one-q"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "test",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() { },
  mounted() { },
  destroy() { },
  /* 5. Vue方法 */
  methods: {}
};
</script>
<style scoped lang="scss">
.test {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}

.one {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  background-color: rgba(197, 187, 173, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.one-q{
  width: 50px;
  height: 50px;
  border: 1px solid red;
  background-color: beige;
 
}
</style>
